<!doctype html>
<html lang="en" ng-app="navigator">
<head>
  <meta charset="utf-8">
  <title>JBehave Navigator</title>
  <link rel="stylesheet" href="style/navigator.css">
  <link rel="stylesheet" type="text/css" href="style/jquery-ui.css"/> 
  <script src="js/angular-1.0.2/angular.js"></script>
  <script src="js/angular-modules.js"></script>
  <script src="js/angular-controllers.js"></script>
  <script src="js/jquery/jquery-1.8.0.min.js"></script>
  <script src="js/jquery/jquery-ui-1.8.23.min.js"></script>
  <script src="js/jquery/jquery-framedialog-1.1.2.js"></script>
  <script type="text/javascript">
    // jQuery tabs
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>  
</head>
<body ng-controller="StoriesController">

<div id="page-wrap">
  <div id="inside">
    <div id="header"> <a href="http://www.jbehave.org"><img src="images/jbehave-logo.png" alt="header"/></a> </div>
        <div id="main-content">
          <div id="tabs">
	        <ul>
	          <li><a href="#tabs-1">Stories</a></li>
              <li><a href="#tabs-2">Scenarios</a></li>
	        </ul>
        
	        <!-- Stories -->
	        <div id="tabs-1"> 
		        <p class="search">Search: <input ng-model="query"/></p>
		        <table>
		           <thead>
		             <tr>
		               <th><a href="" ng-click="predicate = 'status'; reverse=!reverse" title="Click to sort">Status</a></th>
		               <th><a href="" ng-click="predicate = 'story.description.descriptionAsString'; reverse=!reverse" title="Click to sort">Path</a></th>
		               <th><a href="" ng-click="predicate = 'story.description.descriptionAsString'; reverse=!reverse" title="Click to sort">Description</a></th>
		               <th>Meta</th>
                       <th><a href="" ng-click="predicate = 'localizedNarrative'; reverse=!reverse" title="Click to sort">Narrative</a></th>
                       <th><a href="" ng-click="predicate = 'timing.durationInMillis'; reverse=!reverse" title="Click to sort">Duration</a></th>
		             </tr>
		           </thead>
		           <tbody>
		              <tr ng-repeat="performable in data.xref.stories | filter:query | orderBy:predicate:reverse"
		                            ng-click="showStory(performable.story.path)" title="Click to view the story details">
                        <td class="{{performable.status}}">{{performable.status}}</td>
		                <td>{{performable.story.path}}</td>
		                <td>{{performable.story.description.descriptionAsString}}</td>
		                <td> <p ng-repeat="property in performable.story.meta.properties">
		                    @{{property["@name"]}} {{property["@value"]}}
		                     </p>
		                </td>
		                <td>{{performable.localizedNarrative|newline_to_comma}}</td>
		                <td>{{performable.timing.durationInMillis}}</td>
		              </tr>
		            </tbody>
		        </table>        
	        </div>
	        <!-- Scenarios -->
            <div id="tabs-2">
                <p class="search">Search: <input ng-model="query"/></p>
                <table>
                   <thead>
                     <tr>
                       <th><a href="" ng-click="predicate = 'status'; reverse=!reverse" title="Click to sort">Status</a></th>
                       <th><a href="" ng-click="predicate = 'scenario.title'; reverse=!reverse" title="Click to sort">Title</a></th>
                       <th>Meta</th>
                       <th><a href="" ng-click="predicate = 'storyPath'; reverse=!reverse" title="Click to sort">Story</a></th>
                     </tr>
                   </thead>
                   <tbody>
                      <tr ng-repeat="performable in data.xref.scenarios | filter:query | orderBy:predicate:reverse"
                                    ng-click="showStory(performable.storyPath)" title="Click to view the story details">
                        <td class="{{performable.status}}">{{performable.status}}</td>                                    
                        <td>{{performable.scenario.title}}</td>
                        <td> <p ng-repeat="property in performable.scenario.meta.properties">
                            @{{property["@name"]}} {{property["@value"]}}
                             </p>
                        </td>
                        <td>
                            {{performable.storyPath}}
                        </td>
                      </tr>
                    </tbody>
                </table>        
	        </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
